

<template>
  <div style="padding: 10px">
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable />
      <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>
    </div>



    <el-table
        border
        stripe
        ref="Table"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="id" label="节次" width="170"  />
<!--      <el-table-column property="ClassTime" label="上课时间" width="160" />-->
      <el-table-column property="day1" label="周一" width="170" />
      <el-table-column property="day2" label="周二" width="170" />
      <el-table-column property="day3" label="周三" width="170" />
      <el-table-column property="day4" label="周四" width="170" />
      <el-table-column property="day5" label="周五" width="170" />
        <el-table-column property="day5" label="操作" width="170" v-if="user.age===1">
        <template #default="scope">
          <el-button  size="large" @click="handleEdit(scope.row)" v-if="user.age===1">编辑</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div style="margin: 10px 0"/>
    <el-carousel :interval="4000" type="card" height="200px" :key="fit">
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

    <div style="margin: 1000px 0">


      <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[5,10,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>

      <el-dialog
          v-model="dialogVisible"
          title="Tips"
          width="30%"
      >
        <el-form :model="form" label-width="120px">
          <el-form-item label="周一">
            <el-input v-model="form.day1"></el-input>
          </el-form-item>

        </el-form>
        <el-form :model="form" label-width="120px">
          <el-form-item label="周二">
            <el-input v-model="form.day2"></el-input>
          </el-form-item>

        </el-form>
        <el-form :model="form" label-width="120px">
          <el-form-item label="周三">
            <el-input v-model="form.day3"></el-input>
          </el-form-item>

          <el-form-item label="周四">
            <el-input v-model="form.day4"></el-input>
          </el-form-item>

          <el-form-item label="周五">
            <el-input v-model="form.day5"></el-input>
          </el-form-item>
        </el-form>

        <template #footer>
         <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="save"
              >确定</el-button
              >
            </span>
        </template>

      </el-dialog>

    </div>

  </div>





</template>

<style scoped>
.el-carousel__item h3 {
  color: #d0e871;
  font-size: 14px;
  opacity: 0.15;
  line-height: 600px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  /*background-color: #acbf99;*/
  background-image: url("0.png")  ;
}

.el-carousel__item:nth-child(2n + 1) {
  background-image: url("5.jpg") ;
}
</style>

<script>
// @ is an alias to /src


import request from "../utils/request";

export default {
  name:'Course',
  components:{

  },
  data() {
    return {
      form:{},
      user:{},
      dialogVisible:false,
      search: '',
      currentPage:1,
      pageSize:10,
      total:0,
      tableData: [

      ],
      multipleSelection: [],
    }
  },
  created(){
    let userStr=sessionStorage.getItem("user")||"{}"
    this.user=JSON.parse(userStr)

    this.load()
  },
  methods: {
    load() {//user/selectAllUsers
      ///user
      //http://localhost:9090/user/selectAllUsers
      request.get("/course",{
        params:{
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search
        }
      }).then(res => {
        console.log(res)
        this.tableData=res.data.records
        this.total=res.data.total
        //this.load()//add01
      })
    },
    add(){

      this.dialogVisible=true
      this.form={}//清空原有属性

    },
    save(){
      if (this.form.id){
        request.put("/course",this.form ).then(res=> {
          console.log(res)
          this.$message({
            type:"success",
            message:"更新成功！ :)"
          })
          this.load()
          this.dialogVisible=false
        })
      }
      else {
        request.post("/course",this.form ).then(res=> {
          console.log(res)
          this.$message({
            type:"success",
            message:"新增成功！ :)"
          })
          this.load()
          this.dialogVisible=false
        })
      }

    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleEdit(row){


      this.form=JSON.parse(JSON.stringify(row))
      this.dialogVisible=true;

    },
    handleDelete(id){
      console.log(id)
      request.delete("/course/"+id).then(res=>
      {
        /*if (res.code==0){
          this.$message()
        }*/
        this.load()
      })
    },
    handleSizeChange(){

    },
    handleCurrentChange(){

    },

  },

}

</script>

